<template>
  <v-container fluid>
    <v-row>
      <v-col cols="auto">
        <span class="text-h6">Playground</span>
        <p class="text-body-2">Iterate on and test prompts.</p>
      </v-col>
      <v-spacer />
      <v-col cols="auto">
        <v-sheet class="d-flex ga-4">
          <v-btn class="rounded" icon="mdi-file-document-outline" size="x-small" tile />
          <v-btn text="3" />
          <v-btn>3</v-btn>
          <v-btn>4</v-btn>
          <v-btn>5</v-btn>
        </v-sheet>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="6">
        <v-row class="bg-grey-lighten-3">
          <v-col cols="2">
            Prompts
          </v-col>
          <v-spacer />
          <v-col cols="auto">
            <v-btn prepend-icon="mdi-plus" size="small">Compare</v-btn>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="auto">
            <!-- <v-select density="compact"></v-select> -->
            <v-btn size="x-small" icon=""></v-btn>
          </v-col>
          <v-col class="pl-0">
            <v-divider />
          </v-col>
          <v-col class="pl-0" cols="3">
            <v-chip>OpenAI gpt-4.1-mini</v-chip>
          </v-col>
          <v-col class="pl-0" cols="auto">
            <v-btn size="x-small" icon=""></v-btn>
          </v-col>
          <v-col class="pl-0" cols="auto">
            <v-btn size="small">Save</v-btn>
          </v-col>
          <v-col class="pl-0" cols="auto">
            <v-btn size="x-small" icon=""></v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-expansion-panels v-model="panel">
              <v-expansion-panel class="border-sm" elevation="0">
                <template #title>
                  <v-select density="compact" model-value="System" />
                </template>
                <template #text>
                  <p>You are a chatbot.</p>
                </template>
              </v-expansion-panel>
              <v-expansion-panel class="border-sm" elevation="0" value="ture">
                <template #title>
                  <v-select density="compact" model-value="Human" />
                </template>
                <template #text>
                  <p>You are a chatbot.</p>
                </template>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-col>
        </v-row>
        <v-row>
          <v-col class="pr-0" cols="auto">
            <v-btn class="text-none text-subtitle-2" density="compact" prepend-icon="mdi-plus">Message</v-btn>
          </v-col>
          <v-col class="pr-0" cols="auto">
            <v-btn class="text-none text-subtitle-2" density="compact" prepend-icon="mdi-plus">Output
              Schema</v-btn>
          </v-col>
          <v-col class="pr-0" cols="auto">
            <v-btn class="text-none text-subtitle-2" density="compact" prepend-icon="mdi-plus">Tool</v-btn>
          </v-col>
        </v-row>
      </v-col>
      <v-divider length="600" vertical />
      <!-- <v-col class="pa-0">
        <div class="border-sm" style="display: inline; height: 512px;" />
      </v-col> -->
      <v-col cols="6">
        <v-row class="bg-grey-lighten-3">
          <v-col>
            Inputs
          </v-col>
        </v-row>
        <v-row class="mb-12">
          <v-col>
            <v-text-field class="btn-20122" placeholder="Enter variable value..." density="compact" prefix="question">
            </v-text-field>
          </v-col>
        </v-row>
        <v-row class="bg-grey-lighten-3">
          <v-col>
            Outputs
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <p>Click Start to run generation...</p>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const panel = ref([0, 1])

</script>
<style scoped>
:deep(.btn-20122 .v-text-field__prefix) {
  opacity: 1;
}
</style>
